<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<div id=" app">

    <title>Document</title>
</head>

<body>
    <div id="router-view">
        <h1>我是容器,我可以渲染对应组件</h1>
    </div>
    <a href="#t1">切换到组件 1</a>
    <a href="#t2">切换到组件 2</a>
    </div>
    <template id="t1">, initial-scale=1.0">
        <h1>这是组件 1 内容</h1>
    </template>
    <template id="t2">
        <h1>这是组件 2 内容</h1>
    </tmplate>
        <script>
            // 绑定 hashchange 事件监听变化
            window.onhashchange = function () {
                let hash = location.hash.substring(1);
                console.log("hash = ", hash);
                // 让#router-view 的 div 内容变成 id 等于对应 hash 模板内容
                document.getElementById('router-view').innerHTML =
                    document.getElementById(hash).innerHTML;

            }
        </script>
</body>

</html>